<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/bookdetails/evaluate.css" />
	</head>

	<body>
		<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="header">
					<div class="praise">
						<div class="praise_rate">好评率</div>
						<div class="praise_num">（92%）</div>
					</div>
					<div class="score">
						<div class="score_img">
							<div class="score_o"></div>
							<div class="score_o"></div>
							<div class="score_o"></div>
							<div class="score_o"></div>
							<div class="score_b"></div>
						</div>
						<div class="score_num">4.5分</div>
					</div>
				</div>
				<div class="content">
					<!--<div class="comment">
						<div class="comment_hade"><img src="../../imges/head (5).png" /></div>
						<div class="comment_data">
							<div class="news">
								<div class="comment_name">克鲁尼</div>
								<div class="comment_time">2017-07-19</div>
							</div>
							<div class="num">
								<div></div>
								<div></div>
								<div></div>
								<div></div>
							</div>
							<div class="comment_main">
								<div>不错，强烈建议取消中国男足，因为这支国 足队伍让世界任何角落的知道了中国是真真 切切的纸老虎。</div>
							</div>
						</div>
					</div>
					<div class="comment">
						<div class="comment_hade"><img src="../../imges/head (1).png" /></div>
						<div class="comment_data">
							<div class="news">
								<div class="comment_name">凯奇</div>
								<div class="comment_time">2017-07-11</div>
							</div>
							<div class="num">
								<div></div>
								<div></div>
								<div></div>
								<div></div>
								<div></div>
							</div>
							<div class="comment_main">
								<div>在运营商业务和企业业务的增速大幅放缓后， 华为的营收增长将主要来自智能手机业务。</div>
							</div>
						</div>
					</div>-->
					<!--<div class="comment">
						<div class="comment_hade"><img src="../../imges/head (2).png" /></div>
						<div class="comment_data">
							<div class="news">
								<div class="comment_name">罗伯特</div>
								<div class="comment_time">2017-07-06</div>
							</div>
							<div class="num">
								<div></div>
								<div></div>
								<div></div>
								<div></div>
							</div>
							<div class="comment_main">
								<div>很好，很强，很棒！</div>
								<div class="comment_img">
									<div><img src="../../imges/Group 800.png" /></div>
								</div>
							</div>
						</div>
					</div>-->
					<div class="comment" v-for="item in flowers">
						<div class="comment_hade"><img :src="item.head" /></div>
						<div class="comment_data">
							<div class="news">
								<div class="comment_name">{{item.name}}</div>
								<div class="comment_time">{{item.time}}</div>
							</div>
							<div class="num">
								<div v-for="n in item.num"></div>
							</div>
							<div class="comment_main">
								<div>{{item.content}}</div>
								<div class="comment_img" v-show="item.imgsrc!=''">
									<div><img :src="item.imgsrc" /></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="translate"><img src="../../imges/Group 804.png" /></div>
		<div class="operation">
			<div class="purchase">微店购买</div>
			<div class="bookshelf">加入我的书架</div>
		</div>
		<script src="../../js/libs/mui.min.js"></script>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script type="text/javascript">
			var list = [{
					head: "../../imges/head (4).png",
					name: "克鲁尼",
					time: "2017-07-01",
					num: 4,
					content: "不错，强烈建议取消中国男足，因为这支国 足队伍让世界任何角落的知道了中国是真真 切切的纸老虎。",
					imgsrc: ""
				},
				{
					head: "../../imges/head (1).png",
					name: "凯奇",
					time: "2017-07-06",
					num: 5,
					content: "在运营商业务和企业业务的增速大幅放缓后， 华为的营收增长将主要来自智能手机业务。",
					imgsrc: ""
				},
				{
					head: "../../imges/head (3).png",
					name: "凯奇",
					time: "2017-07-01",
					num: 4,
					content: "很好，很强，很棒！",
					imgsrc: "../../imges/Group 800.png"
				},
				{
					head: "../../imges/head (3).png",
					name: "凯奇",
					time: "2017-07-01",
					num: 4,
					content: "很好，很强，很棒！",
					imgsrc: "../../imges/Group 800.png"
				},
				{
					head: "../../imges/head (3).png",
					name: "凯奇",
					time: "2017-07-01",
					num: 4,
					content: "很好，很强，很棒！",
					imgsrc: "../../imges/Group 800.png"
				},
			]
			var vm = new Vue({
				el: "#offCanvasContentScroll",
				data: {
					flowers: list
				}
			})
			
			mui.init()
			window.onload = function() {
				mui('#offCanvasContentScroll').scroll();
			}
			var scroll = mui('.mui-scroll-wrapper').scroll({
				bounce: false
			});

			$(".translate").on("tap", function() {
				mui.openWindow({
					url: 'comment.html',
					id: "comment.html"
				})
				setTimeout(function() {
					mui.currentWebview.hide('none');
				}, 300);
			})
		</script>
	</body>

</html>